import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { port, outDir, proxy, title } from "./vite-config.js";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import path from "path";
// element
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// icons
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";

import VueSetupExtend from "vite-plugin-vue-setup-extend";

import WindiCSS from "vite-plugin-windicss";

// html
import { createHtmlPlugin } from "vite-plugin-html";

// vue-hooks-plus
import { VueHooksPlusResolver, VueHooksPlusUseImmerResolver } from "@vue-hooks-plus/resolvers";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  console.log(command, mode, isSsrBuild, isPreview);
  // 判断是否是生产环境
  const isProduction = mode === "production";
  const base = `/${outDir}`;

  return {
    base,
    build: {
      outDir
    },
    define: {
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
    },
    server: {
      port,
      open: true,
      proxy
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src")
      }
    },
    plugins: [
      vue(),
      WindiCSS(),
      VueSetupExtend(),
      AutoImport({
        // 自动导入vue、vue-router、@vueuse/core
        imports: ["vue", "vue-router", "@vueuse/core", "pinia"],

        // 生成ts声明文件
        dts: "auto-import/auto-imports.d.ts",
        // 自动导入自定义store、hooks、三维地图api
        dirs: ["src/store", "src/hooks", "src/api/vrmap-api"],
        resolvers: [
          ElementPlusResolver(),
          VueHooksPlusResolver(),
          VueHooksPlusUseImmerResolver(),
          // 自动导入图标组件
          IconsResolver({
            prefix: "Icon"
          })
        ],
        eslintrc: {
          enabled: true, // Default `false`
          filepath: "auto-import/.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        }
      }),
      Components({
        resolvers: [
          IconsResolver({
            enabledCollections: ["ep"] // 包含不同的图标集合,目前只用element图标 https://icon-sets.iconify.design/
          }),
          ElementPlusResolver()
        ],
        dts: "auto-import/components.d.ts"
      }),
      Icons({
        autoInstall: true
      }),
      // html变量注入,baseUrl和css文件
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            title,
            baseUrl: base,
            // 网页favicon和外部css文件
            injectStyle: `<link rel="icon" type="image/svg+xml" href="${isProduction ? base : "."}/favicon.ico" />`
          }
        }
      })
    ]
  };
});
